<template>
    <div>
        <div style="height: auto;width:87%;margin:0 auto;">
            <p style="margin-top:1.8vw;font-size:1.2vw;color: #7A7A7A;font-family: DengXian">图库</p>
            <p
                style="margin-top:0.1vw;font-size:2vw;color: #44519E;font-weight: bold;font-family: DengXian"
            >收藏夹</p>
            <div style="margin-top:0.6vw;width: 10vw;height: 0.2vw;background-color:#45529F"></div>
        </div>

        <div style="width: 88%;margin: auto;margin-top:1vw;column-count:5;column-gap:15px;column-fill:auto;">
            <div v-for="(picture,index) in pictureList" :key="index" :picture="picture">
                <div class="picPerHubStyle">
                    <div
                        class="picPerHub"
                        :style="'backgroundImage:url('+picture.picturepath+')'"
                        v-on:click="showDetail(picture)"
                    ></div>
                </div>
            </div>
        </div>

        <Modal v-model="modal1" title="图片信息" :footer-hide="true" width="40" style="background">
            <div style="text-align:center">
                <img name="picture" :src="detail.path" style="max-width: 100%;max-height: 30vw">
            </div>
            <div style="margin:0 auto;width:90%;margin-bottom:4vw;" >
                <Row>
                    <i-col span="10">
                        <div style="margin-top:0.6vw;">
                            <span style="margin-left: 0.5vw;font-size: 1.3vw;font-weight: bold;"></span>
                        </div>
                    </i-col>
                    <i-col span="12">
                        <div style="margin-top:0.6vw;text-align:right;margin-right:0.5vw">
                            <img
                                src="../../assets/tab.png"
                                style=" width: 1vw;vertical-align: middle;margin-right:0.4vw;margin-top:-0.3vw"
                            >
                            <span
                                style="font-size: 1vw;margin-right:0.2vw"
                                v-for="(tag,index) in pictureInfo.tagList"
                                :key="index"
                            >{{tag}}</span>
                        </div>
                    </i-col>

                    <i-col span="2">
                        <!-- <Button
                            v-if="pictureInfo.like===false"
                            type="primary"
                            style="width:5vw;margin-left:2vw;"
                            v-on:click="like()"
                        >喜 欢</Button>
                        <Button
                            v-else
                            type="primary"
                            style="width:5vw;margin-left:2vw;"
                        >喜 欢</Button>-->
                        <div style="margin-top:0.5vw;margin-left:2vw">
                            <Icon
                                v-if="pictureInfo.like===false"
                                v-on:click="like()"
                                type="ios-heart-outline"
                                size="30"
                            />
                            <Icon
                                v-else
                                type="ios-heart"
                                v-on:click="like()"
                                size="30"
                                color="red"
                            />
                        </div>
                    </i-col>
                </Row>
            </div>

            <div
                style="border-top: 1px solid #dcdee2;border-color:#e8eaec;width: 100%;position: absolute;bottom: 0;left: 0;"
            >
                <Row>
                    <i-col span="3" style="height:3.79vw">
                        <img
                            style="width: 3.5vw;margin-top: 0.2vw;margin-left:1vw; border-radius: 3vw;border:#2b85e4 2px solid;"
                            :src="pictureInfo.headpicture"
                        >
                    </i-col>
                    <i-col span="10" style="margin-top:0.4vw">
                        <p
                            style="margin-left: 0.8vw; margin-top: 0.6vw;font-size: 1.1vw;font-weight: bold;"
                        >{{pictureInfo.nickname}}</p>
                        <!-- <p style="margin-left: 0.8vw; margin-top: 0.2vw;font-size: 0.5vw;">
                            发布图片
                            <span style="color:#1DACFF;margin-left:0.1vw">123</span>
                        </p>-->
                    </i-col>
                    <i-col span="11" style="margin-top:0.9vw;text-align:right;">
                                              <Button
                            @click="downloadPicture(pictureInfo.picturepath)"
                            icon="md-download"
                            style="margin-right:0.5vw"
                        ></Button>
                        <Button
                            type="success"
                            style="width:5vw;"
                            v-on:click="evokeVisitorFilter(pictureInfo.id)"
                        >访 问</Button>

                        <Button
                            v-if="pictureInfo.favorite===false"
                            type="warning"
                            icon="ios-heart-outline"
                            style="margin-left:0.8vw;margin-right:1.5vw"
                            v-on:click="star()"
                        >收藏图片</Button>
                        <Button
                            v-else
                            type="warning"
                            icon="ios-heart"
                            style="margin-left:0.8vw;margin-right:1.5vw"
                            v-on:click="unstar()"
                        >取消收藏</Button>
                    </i-col>
                </Row>
            </div>
        </Modal>
    </div>
</template>

<script>
import picC from "../picture/picCollect";
export default {
  data() {
    return {
      pictureList: [],
      modal1: false,
      detail: {
        path: "",
        id: ""
      },
      pictureInfo: {}
    };
  },
  created() {

    // if (this.$store.state.user.isLogin === false) {
    //   this.$Message.warning("请先登录");
    //   this.$router.push({
    //     name: "home"
    //   });
    //   this.$store.commit("setLoginFilter");
    //   return;
    // }

    this.http.post(this,'/isLogin')

    let _this = this;
    let Params = new URLSearchParams();
    Params.append("HubId", this.$store.state.user.starId);
    this.http.post(this, "/favoritePicture", Params).then(function(msg) {
      _this.pictureList = msg.data.data;
    });
  },
  methods: {
    showDetail(index) {
      let _this = this;
      this.modal1 = true;
      this.detail.id = index.id;
      this.detail.path = index.picturepath;
      let param = new URLSearchParams();
      param.append("PictureId", index.id);
      this.http.post(this, "/ImageInfor", param).then(function(msg) {
        _this.pictureInfo = { ...msg.data.data };
      });
    },
    evokeVisitorFilter(id) {
      this.$store.commit("setVisitorFilter", id);
    },
    like() {
      let _this = this;
      let Params = new URLSearchParams();
      Params.append("PictureId", this.detail.id);
      this.http.post(this, "/likepicture", Params).then(function(msg) {
        _this.pictureInfo.like = !_this.pictureInfo.like;
      });
    },
    star() {
      let _this = this;
      let Params = new URLSearchParams();
      Params.append("pictureId", this.detail.id);
      Params.append("favoriteID", this.$store.state.user.starId);
      this.http.post(this, "/favorite", Params).then(function(msg) {
        _this.pictureInfo.favorite = true;
      });
    },
    downloadPicture(url) {
      let time = new Date();
      fetch(url)
        .then(res => res.blob())
        .then(blob => {
          // 创建隐藏的可下载链接
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = URL.createObjectURL(blob);
          a.download = "iSee" + time.getTime() + ".png";
          document.body.appendChild(a);
          a.click();
          // 移除元素
          document.body.removeChild(a);
        });
    },
    unstar() {
      let _this = this;
      let Params = new URLSearchParams();
      Params.append("pictureId", this.detail.id);
      Params.append("FavoriteId", this.$store.state.user.starId);
      this.http.post(this, "/cancelFavorite", Params).then(function(msg) {
        _this.pictureInfo.favorite = false;
      });
    }
  },
  components: {
    picC
  }
};
</script>

<style>
.picPerHub {
  background-image: url(../../assets/l-bj.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 12vw;
  height: 12vw;
  border-radius: 10px;
}

.picPerHubStyle {
  margin-top: 18px;
  display: inline-block;
}
.picPerHubStyle img {
  width: 1vw;
  vertical-align: middle;
}

.picPerHubStyle span {
  margin-left: 0.8vw;
  font-size: 0.9vw;
  color: #1e1e1e;
  font-family: DengXian;
}
</style>
